<template>

	<template v-if="!Data.list.length">
		<wd-status-tip image="collect" tip="用户无地址记录" />
	</template>

	<template v-else>
		<view class="address-list">
			<view class="address-list-li" v-for="(item,index) in Data.list">
				<view class="address-content">
					<view class="address-content-top">
						<text>广东省惠州市惠阳区淡水街道</text>
					</view>
					<view class="address-content-center">
						<text>{{item.detail}}</text>
					</view>
					<view class="address-content-bottom">
						<text>{{item.recipient}}</text>
						<text>{{item.mobile}}</text>
					</view>
				</view>
				<view class="address-options">
					<view class="address-options-left">
						<text @click="SetDefaultAddress(item,index)">设为默认</text>
					</view>
					<view class="address-options-right">
						<!-- 	<text @click="ClickDelete(item)">删除</text>
						<text @click="ClickCopy(item)">复制</text>
						<text @click="ClickEdit(item)">修改</text> -->

						<wd-button hairline size="small" @click="clickRemoveRole(li)">编辑</wd-button>
						<wd-button type="error" hairline size="small"
							@click="clickRemoveAddress(item,index)">删除</wd-button>

					</view>
				</view>
			</view>
		</view>
	</template>

	<wd-message-box></wd-message-box>

</template>

<script setup>
	import {
		useMessage
	} from 'wot-design-uni'
	import overallRequest from "@/utool/http/http.js"
	const message = useMessage()

	import {
		reactive
	} from 'vue'
	import {
		onReady,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	const Data = reactive({
		user: null,
		page: 1,
		pages: null,
		limit: 10,
		total: null,
		list: []
	})
	// 点击复制地址
	function ClickCopy() {

	}
	// 点击删除地址
	function clickRemoveAddress(item, index) {
		let {
			id
		} = item
		let user = Data.user
		let url = `/Manage/removeUserAddress`
		message
			.confirm({
				msg: '删除后不可恢复',
				title: '是否确定删除该地址'
			})
			.then(() => {
				return overallRequest(url, {
					method: "POST",
					data: {
						user,
						id
					}
				})
			}).then(res => {
				let {
					msg
				} = res
				Data.list.splice(index, 1)
				uni.showToast({
					title:msg
				})
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})

	}
	// 点击修改地址
	function ClickEdit() {

	}
	// 点击设置默认地址
	function SetDefaultAddress(item, index) {
		let {
			id
		} = item
		let user = Data.user
		let url = `/Manage/SetUserDefaultAddress`
		overallRequest(url, {
			method: "POST",
			data: {
				user,
				id
			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}

	// 获取列表数据
	function GetList() {
		let page = Data.page
		let limit = Data.limit
		let user = Data.user
		let url = `/manage/userAddressList?user=${user}&page=${page}&limit=${limit}`
		overallRequest(url).then(res => {
			let {
				data
			} = res
			let {
				page,
				pages,
				limit,
				list
			} = data
			Data.pages = pages
			Data.limit = limit
			Data.list.push(...list)
		})
	}
	onLoad((query) => {
		let {
			user
		} = query
		Data.user = user
		GetList()
	})
	// 滚动页面底部
	onReachBottom(() => {
		let page = Data.page
		let pages = Data.pages
		if (page >= pages) {
			return
		} else {
			Data.page++
			GetList()
		}
	})
</script>

<style scoped>
	page {
		height: 100%;
	}

	.address-list {
		display: flex;
		flex-direction: column;
		padding: 35rpx;
		background: #c3c3c322;
		gap: 25rpx;
	}

	.address-list-li {
		font-size: 24rpx;
		color: gray;
		background-color: white;
		margin-bottom: 18rpx;
		padding: 15rpx 30rpx;
		border-radius: 25rpx ;
	}

	.address-content {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		border-bottom: 1rpx solid #c3c3c344;
		padding-bottom: 15rpx;
	}

	.address-content-top {}

	.address-content-center {
		font-weight: bold;
		font-size: 26rpx;
		color: #000;

	}

	.address-content-bottom {
		display: flex;
		gap: 15rpx;
	}

	.address-options {
		display: flex;
		padding: 10rpx 0rpx;
		margin-top: 10rpx;
	}

	.address-options-left {
		flex: 1
	}

	.address-options-right {
		display: flex;
		gap: 25rpx;
	}
</style>